@extends('master/master_index')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('home/css/Topic_UserCenter.css')}}">
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        .wrap-dialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 16px;
            text-align: center;
            background-color: rgba(0, 0, 0, .4);
            z-index: 999;
        }

        .dialog {
            position: relative;
            margin: 15% auto;
            width: 300px;
            background-color: #FFFFFF;

        }

        .dialog .dialog-header {
            height: 20px;
            padding: 10px;
            background-color: lightskyblue;
        }

        .dialog .dialog-body {
            height: 30px;
            padding: 20px;
        }

        .dialog .dialog-footer {
            padding: 12px;
            background-color: whitesmoke;
        }

        .btn {
            width: 70px;
            padding: 2px;
        }

        .hide {
            display: none;
        }

        .ml50 {
            margin-left: 50px;
        }
    </style>
@endsection

@section('title')
    <title>{{$topic->title}}</title>
@endsection

@section('content')

    <div class="conLeft tableFix">
        <p>作者：{{$topic->user->username}}</p>
        <div id="img">
            <a href="{{url('userCenter')}}/user={{$topic->user->id}}">
                <img src="{{asset($topic->user->profile->avatar)}}">
            </a>
        </div>
        <div class="profile">
            <span><i class="Hui-iconfont">&#xe643;</i>@if(!empty($topic->user->profile->city)){{$topic->user->profile->city}}
                &nbsp;@else未知&nbsp;@endif</span>&nbsp;
            @if($topic->user->profile->gender==1)<img class="gender_img" src="{{asset('home/img/man.png')}}">@else<img
                    class="gender_img_woman" src="{{asset('home/img/woman.png')}}">@endif
        </div>
        @if(Session::has('userModel'))
            <input type="hidden" id="login_hid_input" value="{{Session::get('userModel')->id}}">
            @if($topic->user->id==Session::get('userModel')->id)
                <a class="user_center_a profile_update_a" href="{{url('myUserCenter')}}">个人中心</a>
            @else
                @if($followed==0)
                    <a href="{{url('follow')}}/another={{$topic->user->id}}" class="yellow y1"><i class="Hui-iconfont">
                            &#xe717;&nbsp;</i>关注Ta</a>
                @else
                    <a href="{{url('followDown')}}/another={{$topic->user->id}}" class="yellow y1 followDown"><i
                                class="Hui-iconfont">&#xe69d;&nbsp;</i>已关注</a>
                @endif
            @endif
        @else
            <input type="hidden" id="login_hid_input" value="0">
            <a onclick="login_follow()" class="yellow y1"><i class="Hui-iconfont">&#xe717;&nbsp;</i>关注Ta</a>
        @endif
    </div>

    <div id="conRight">
        <div id="article">
            <div id="article_title">
                <h1>{{$topic->title}}</h1>
                <p>
                    <i class="Hui-iconfont t_i">&#xe606;</i>{{$topic->created_at->diffForHumans()}} · <i class="Hui-iconfont t_i">&#xe725;</i>{{$topic->view_num}} · <i class="Hui-iconfont t_i">&#xe686;</i>{{count($topic->replies)}} · <i class="Hui-iconfont t_i">&#xe66d;</i>{{count($topic->vote)}}
                </p>
            </div>
            <div id="content">
                {!!$topic->content!!}
            </div>
        </div>
        <div class="vote">
            <div id="ti" class="vote_top">
                @if($voted==1)
                    <span class="vote_i voteDown " onclick="voteDown()">
                    <i class="Hui-iconfont ">已</i>
                    </span>
                @else
                    <span class="vote_i" onclick="vote({{$topic->id}})">
                    <i class="Hui-iconfont ">&#xe697;</i>
                    </span>
                @endif
            </div>
            @if(count($topic->vote)>0)
                <div class="vote_none">
                    @foreach($topic->vote as $v)
                        <div>
                            <a href="{{url('userCenter')}}/user={{$v->user->id}}"><img src="{{asset($v->user->profile->avatar)}}" class="vote_avatar"></a>
                            <input type="hidden" value="{{$v->user_id}}">
                        </div>
                    @endforeach
                </div>
            @else
                <div class="vote_none"><span>快来成为第一个赞的人</span></div>
            @endif
        </div>
        <div id="reply">
            <div id="number">
                <div id="ti">
                    <p class="reply_num">回复数量{{count($topic->replies)}}</p>
                </div>
                <ul class="reply_ul">
                    @if(count($topic->replies)>0)
                        @foreach($topic->replies as $r)
                            <li>
                                <div class="all">
                                    <div class="avat">
                                        <a href="{{url('userCenter')}}/user={{$r->user->id}}"><img
                                                    src="{{asset($r->user->profile->avatar)}}"></a>
                                    </div>
                                    <div class="list_reply">
                                        <div class="time">
                                            <a class="username"
                                               href="{{url('userCenter')}}/user={{$r->user_id}}">{{$r->user->username}}</a>
                                            <span>&nbsp;at {{$r->created_at->diffForHumans()}}</span>
                                            <i class="Hui-iconfont reRight"><input type="text"
                                                                                   value="{{$r->user['id']}}"
                                                                                   style="display: none">&#xe622;</i>
                                            @if(Session::has('userModel'))
                                                @if($r->user->id==Session::get('userModel')->id)
                                                    <i class="Hui-iconfont s4" style="color:#e56362">&#xe609;
                                                        <input type="text" style="display: none;" value="{{$r->id}}">
                                                    </i>
                                                @endif
                                            @endif
                                        </div>
                                        <div class="say">
                                            @if(!empty($r->answer_id))<a
                                                    href="{{url('userCenter')}}/user={{$r->answer_id}}"
                                                    class="blue_reply"><span>@</span>{{$r->answer->username}}
                                            </a></span>@endif{{$r->content}}
                                        </div>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    @else
                        <div id="none">暂无评论！</div>
                    @endif
                </ul>
            </div>
        </div>
        <form>
            <textarea name="reply_content" id="reply_content" cols="30" rows="10"
                      @if(!Session::has('userModel'))class="yes" placeholder="需要登录才能发表评论" disabled="disabled"
                      @endif required="required"></textarea>
            <a id="a_btn" @if(!Session::has('userModel')) disabled="disabled" class="yes"
               @endif href="javascript:void(0)"><i class="Hui-iconfont">&#xe603;</i>评论</a>
        </form>
        <div class="wrap-dialog hide msg2">
            <div class="dialog">
                <div class="dialog-header">
                    <span class="dialog-title">登录确认</span>
                </div>
                <div class="dialog-body">
                    <span class="dialog-message">此功能需登录</span>
                </div>
                <div class="dialog-footer">
                    <a href="{{url('login')}}"><input type="button" id="b1" class="btn" value="前去登录"></a>
                    <input type="button" class="btn ml50" id="cancel" value="取消"/>
                </div>
            </div>
        </div>
        <div class="wrap-dialog hide msg1 ">
            <div class="dialog">
                <div class="dialog-header">
                    <span class="dialog-title">登录确认</span>
                </div>
                <div class="dialog-body">
                    <span class="dialog-message">确定删除这条评论？</span>
                </div>
                <div class="dialog-footer">
                    <input type="button" class="btn" id="confirm" value="确认"/>
                    <input type="button" class="btn ml50" id="cancel2" value="取消"/>
                </div>
            </div>
        </div>
        <div class="wrap-dialog hide msg3 ">
            <div class="dialog">
                <div class="dialog-header">
                    <span class="dialog-title"> ！</span>
                </div>
                <div class="dialog-body">
                    <span class="dialog-message">评论不能为空</span>
                </div>
                <div class="dialog-footer">
                    <input type="button" class="btn" id="confirm2" value="确认"/>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script type="application/javascript">

        function login_follow() {
            $('.msg2').fadeIn();
            $('#cancel').click(function () {
                $('.wrap-dialog').slideUp();
            });
        }

        $('#a_btn').click(function () {
            var login=$('#login_hid_input').val();
            if (login!=0){
                if (login!=0){
                    var replyer = '';
                    var topic_id = '{{$topic->id}}';
                    var user_id = login;
                    var content = $('#reply_content').val().replace(/^\s*/g, "");
                    var string1 = content.indexOf(' ');
                    var string2 = content.indexOf('@');

                    replyer = content.substring(string2 + 1, string1);
                    if (replyer == '@') {
                        alert('回复的格式不正确，请在用户名后加上空格！')
                        return;
                    }

                    if (content != '') {
                        content = content.substring(string1);
                        $.ajax({
                            url: "{{url('reply_add')}}",
                            type: 'POST',
                            data: window.JSON.stringify({
                                content: content, topic_id: topic_id, user_id: user_id, replyer: replyer
                            }),
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Csrf-Token': $('meta[name="_token"]').attr('content')
                            },
                            success: function (message) {
                                if (replyer != message.replyer) {
                                    alert('你回复的用户不存在，请重新输入！')
                                    return;
                                }
                                var li = $('<li>');
                                var div_all = $('<div>').addClass('all').appendTo(li);
                                var div_avat = $('<div>').addClass('avat').appendTo(div_all);
                                $('<img>').prop('src', '@if(Session::has('userModel')){{asset(Session::get('userModel')->profile->avatar)}}@endif').appendTo(div_avat);
                                var div_list = $('<div>').addClass('list_reply').appendTo(div_all);
                                var div_time = $('<div>').addClass('time').appendTo(div_list);
                                $('<a>').addClass('username').html('@if(Session::has('userModel')){{Session::get('userModel')->username}}@endif').appendTo(div_time);
                                var ar = $('<i>').addClass('Hui-iconfont s4').prop({
                                    href: 'javascript:void(0);',
                                    title: '删除'
                                }).appendTo(div_time);
                                $('<input>').prop('type', 'hidden').val(message.reply_id).appendTo(ar);
                                $('<i>').addClass('Hui-iconfont').html('&#xe609;').appendTo(ar);
                                $('<span>').html(message.created_at).appendTo(div_time);
                                var rep = $('<div>').addClass('say').appendTo(div_list);
                                if (message.replyer != '') {
                                    $('<a>').prop({
                                        class: 'blue_reply ',
                                        href: '#',
                                        title: message.replyer
                                    }).html('@' + message.replyer + ' ').appendTo(rep);
                                }

                                $('<span>').html(message.content).appendTo(rep);
                                $('<div>').css('clear', 'both');
                                li.hide();
                                li.appendTo('.reply_ul');
                                $('#none').slideUp();
                                li.slideDown(300);
                                $('#reply_content').val('');
                            },
                            error: function () {
                                alert('Ajax.error!');
                            }
                        });
                    } else {
                        $('.msg3').fadeIn();
                        $('#confirm2').click(function () {
                            $('.wrap-dialog').slideUp();
                        });
                    }
                }
            }else {
                login_follow()
            }
        });

        //删除评论
        $(document).on('click', '.s4', function () {
            var reply_id = $(this).find('input').val();
            var self = this;
            delete_reply(reply_id, self);
        });

        function delete_reply(reply_id, self) {
            $('.msg1').fadeIn();
            $('#cancel2').click(function () {
                $('.msg1').slideUp();
            });
            $('#confirm').click(function () {
                $('.msg1').hide();
                $.ajax({
                    type: 'POST',
                    url: '{{url('delete_reply')}}',
                    data: {reply_id: reply_id, topic:{{$topic->id}}},
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    success: function () {
                        $(self).parents('li').slideUp(300, function () {
                            $(self).remove();
                        });
                    },
                    error: function () {
                        alert('Ajax error!')
                    }
                });
            });

        }
        ;

        function vote() {
            var topic_id ={{$topic->id}};
            var getUrl = '{{url('topic/upVote')}}';
            $.ajax({
                type: 'POST',
                url: getUrl,
                data: {topic_id: topic_id},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
                success: function (respond) {
                    if (respond.msg == 'no login') {
                        login_follow();
                    }
                    if (respond.msg == 'ok') {
                        var div = $('<div>');
                        var span = $('<span>').addClass('vote_i voteDown').on('click', voteDown).appendTo(div);
                        var i = $('<i>').addClass('Hui-iconfont').html('已').appendTo(span);
                        $('.vote_top').html(span);
                        var img = $('<img>').prop('src', respond.avatar).addClass('vote_avatar').hide();
                        var input = $('<input>').prop('type', 'hidden').prop('value', respond.id).addClass('avatar_input_hide').appendTo(img);
                        img.appendTo($('.vote_none'));
                        img.fadeIn(500);
                    }
                },
                error: function () {
                    alert('Ajax error!')
                }
            });
        }
        ;

        function voteDown() {
            var getUrl = '{{url('topic/voteDown')}}';
            var topic_id ={{$topic->id}};
            $.ajax({
                type: 'POST',
                url: getUrl,
                data: {topic_id: topic_id},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
                success: function (respond) {
                    var span = $('<span>').addClass('vote_i').on('click', vote);
                    var i = $('<i>').addClass('Hui-iconfont').html('&#xe697;').appendTo(span);
                    $('.vote_top').html(span);
                    $('.vote_none').find("input[value='" + respond.id + "']").parent().fadeOut();

                },
                error: function () {
                    alert('Ajax error!')
                }
            });
        };

        (function (window, $) {
            var messages = {
                init: function () {
                    $('.reRight').click(this.answer.bind(this));
                },
                answer: function (event) {
                    var answer_id = $(event.target).children('input').val();
                    $.ajax({
                        type: 'POST',
                        url: '{{url('answer_add')}}',
                        data: {answer_id: answer_id},
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        },
                        success: function (respond) {
                            if (respond.msg == 'no login') {
                                $('.msg2').fadeIn();
                                $('#cancel').click(function () {
                                    $('.wrap-dialog').slideUp();
                                });
                            }
                            else {
                                $('#reply_content').html('@' + respond.msg + ' ').focus();
                            }
                        },
                        error: function () {
                            alert('Ajax error!')
                        }
                    });
                }
            }
            messages.init();
        })(window, jQuery);
    </script>
@endsection